<template>
	<view class="charts-box">
		<qiun-data-charts type="rose" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
	import {electricpie} from '@/api/index.js'
	export default {
		props:['year'],
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['rose'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				// opts: {
				// 	// color: ["#EE6666", "#91CB74", "#1890FF", "#9A60B4"],
				// 	color: ["#FEA492", "#7AECF8", "#A5A1FF", "#FAB2FF"],
				// 	padding: [5, 5, 5, 5],
				// 	enableScroll: false,
				// 	legend: {
				// 		show: true,
				// 		position: "bottom",
				// 		lineHeight: 18,
				// 		fontSize:10
				// 	},
				// 	extra: {
				// 		rose: {
				// 			labelText:{
				// 				fontSize:10,
				// 				show:true
				// 			},
				// 			type: "radius",
				// 			minRadius: 30,
				// 			activeOpacity: 0.5,
				// 			activeRadius: 5,
				// 			offsetAngle: 0,
				// 			labelWidth: 5,
				// 			border: false,
				// 			borderWidth: 1,
				// 			borderColor: "#FFFFFF",
							
				// 			// linearType: "custom",
				// 		},
						
				// 	}
				// }
				opts: {
					// 
					// "#FF4C52","#48DE94","#1F90FF","#5644FF"
					color: ["#FEA492", "#7AECF8", "#A5A1FF", "#FAB2FF"],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 0,
						fontSize:10
					},
					extra: {
						rose: {
							type: "area",
							minRadius: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 50,
							labelWidth: 15,
							border: false,
							borderWidth: 2,
							borderColor: "#FFFFFF"
						}
					}
				}
			};
		},
		mounted() {
			this.getServerData();
		},
		watch:{
			year(){
				this.getServerData();
			}
		},
		methods: {
			getServerData() {
				electricpie(this.year).then(res=>{
					// console.log(res);
					let data = res.data;
					// data.map(item=>item.labelText = `${item.name}:${parseFloat(item.value.toFixed(2))}`)
					// console.log(data);
					data.map(item=>{
						//  item.labelText =  {
						//       formatter: function(item) {
						//         return item.name + "\n" + parseFloat(item.value.toFixed(2)); // 名称和数值分两行
						//       }
						// }
						item.labelText = `${item.name}:${parseFloat(item.value.toFixed(2))}`
						item.textSize =  10
					})
					const obj = {
						series:[
							{
								data:data
							}
						]
					}
					this.chartData = JSON.parse(JSON.stringify(obj));
				})
			},
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 400rpx;

	}
	.charts-box {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: 100%;
	}

</style>